<!-- 个人中心-关注店铺 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
			<view class="" style="width:400rpx;margin: 0 auto;;margin-top: 20rpx;">
				<uv-subsection
				activeColor="#fa4d44"
				inactiveColor="#777"
				mode="button"
				:list="list"
				:current="current"
				@change="change"
				></uv-subsection>
			</view>
		<view v-show="current == 0" class="content-box" style="padding-top: 20rpx;">
			<view v-if="storeList.length == 0" class="noWork">
				暂无关注店铺
			</view>
			<view v-else class="">
				<block v-for="item in storeList" >
				<view class="activity-wrap u-p-b-20  u-m-b-10 groupon-card" style="width: 710rpx;margin-left: 20rpx;border-radius: 20rpx;padding-left: 10rpx;" >
					<view style="-webkit-justify-content: space-between;justify-content: space-between;flex-direction: row; display: flex;height: 100rpx;">
						<view>
							<view style="flex-direction: row; display: flex;">
								<view class="text u-flex" style="width: 100rpx;height: 100rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
									<image :src="item.store.logo" mode="aspectFit" style="width: 80rpx;height: 80rpx;margin-top: 10rpx;border-radius: 15rpx;"></image>
								</view>
								<view style="  display: flex;flex-direction: column;-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between; ;">
									<view  style="height: 50rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;font-size: 30rpx;color: #000;">
										{{item.store.name }}
									</view>
									<view>
										<view 
										style="height: 50rpx;
										text-align: left;
										padding-left: 20rpx;
										padding-top: 10rpx;
										font-size: 20rpx;
										color: #999999;">{{item.favorites}}人关注 | 已售{{item.sales}}件</view>
									</view>
								</view>
							</view>
						</view>
						<view  style="height: 100rpx;margin-top:20rpx" @tap="tostore(item.id)">
							<text style="
							height:56rpx;
							line-height:56rpx;
							border:#fd9306 2rpx solid;
							border-radius: 25rpx;
							font-size: 28rpx;
							padding: 8rpx;
							color: #fd9306;
							margin-right: 20rpx;
							">进店逛逛</text>
						</view>
					</view>
					<!-- 活动商品 -->
					<!-- m -->
					<!-- <scroll-view  class="scroll-box" scroll-x scroll-anchoring> -->
						<view class="goods-box u-flex">
							<view class="min-goods u-m-r-14" v-for="mgoods in spliceArr(item.productList)" :key="mgoods.id" @tap="jump('/pages/goods/detail', { id: mgoods.id })">
								<view class="img-box">
									<view class="pirce-card">
										<view class="pirce-info">
											￥{{mgoods.price}}
										</view>
										<view class="pirce-to">
											立即抢购
										</view>
									</view>
									<image class="img"  :src="JSON.parse(mgoods.productImages)[0].source" mode=""></image>
								</view>
							</view>
						</view>
					<!-- </scroll-view> -->
				</view>
				</block>
			</view>
		</view>
		
		<view v-show="current == 1" class="content-box" style="padding-top: 20rpx;">
			<view v-if="smallList.length == 0" class="noWork">
				暂无关注小店
			</view>
			<view v-else class="">
				<block v-for="item,index in smallList" :key="index" >
				<view class="activity-wrap u-p-b-20  u-m-b-10 groupon-card" style="width: 710rpx;margin-left: 20rpx;border-radius: 20rpx;padding-left: 10rpx;" >
					<view style="-webkit-justify-content: space-between;justify-content: space-between;flex-direction: row; display: flex;height: 100rpx;">
						<view>
							<view style="flex-direction: row; display: flex;">
								<view class="text u-flex" style="width: 100rpx;height: 100rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
									<image :src="item.logo" mode="aspectFill" style="width: 100%;height: 100%;margin-top: 10rpx;border-radius: 15rpx;border-radius: 50%;"></image>
								</view>
								<view style="  display: flex;flex-direction: column;-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between; ;">
									<view  style="height: 50rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;font-size: 30rpx;color: #000;">
										{{item.name }}
									</view>
									<view>
										<view 
										style="height: 50rpx;
										text-align: left;
										padding-left: 20rpx;
										padding-top: 10rpx;
										font-size: 25rpx;
										color: #999999;">{{item.ccdesc}}</view>
									</view>
								</view>
							</view>
						</view>
						<view @click="onGoStore(item.memberId)"  style="height: 100rpx;margin-top:20rpx">
							<text style="
							height:56rpx;
							line-height:56rpx;
							border-radius: 25rpx;
							font-size: 28rpx; 
							padding: 8rpx;
							color: #333;
							margin-right: 20rpx;
							">进店逛逛﹥</text>
						</view>
					</view>
					<!-- 活动商品 -->
					<!-- m -->
					<!-- <scroll-view  class="scroll-box" scroll-x scroll-anchoring> -->
						<view class="goods-box u-flex" style="margin-top: 20rpx;">
							<view
							class="min-goods u-m-r-14"
							v-for="mgoods in item.productList"
							:key="mgoods.id"
							@tap="jump('/pages/goods/detail', { id: mgoods.id,ownerId: item.memberId })">
								<view class="img-box">
									<view class="pirce-card" style="background:#fa4d44;">
										<view class="pirce-info" style="background:#fa4d44;padding-left: 0;">
											￥{{mgoods.price}}
										</view>
										<view class="pirce-to">
											立即抢购
										</view>
									</view>
									<image class="img"  :src="JSON.parse(mgoods.productImages)[0].source" mode=""></image>
								</view>
							</view>
						</view>
					<!-- </scroll-view> -->
				</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>

 
	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	// #endif
	export default {
		components: {
			 
		},
		data() {
			return {
				storeList: [],
				smallList: [],
				rebate:0,
				list:['店铺','小店'],
				current: 0,
				page: 1
			};
		},
		computed: {
		 
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onReachBottom() {
			let that = this
			that.page += 1
			that.init()
		},
		created(){
			this.init();
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-PLUS
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			spliceArr(e){
				if(e.length > 3){
					return e.slice(0,3)
				}
				return e
			},
		 change(e){
			 if(this.current == e) return
			 this.current = e
			 this.page = 1
			 this.storeList = []
			 this.smallList = []
			 this.init()
		 },
			init() {
			 let that = this;
			 let api = ""
			if(that.current == 0) api = "store.storefavorite"
			if(that.current == 1) api = "store.derivativeList"
			 that.$http(api, {
			 	UId: uni.getStorageSync("UId"),
			 	current: this.page,
				pageSize: 20
			 }).then(res => {
			 	if (res) {
					if(that.current == 0){
						if(that.storeList.length == 0){
							that.storeList = res.data;
						}else{
							let arr = res.data
							that.storeList = that.storeList.concat(arr)
						}
					}else{
						if(that.smallList.length == 0){
							that.smallList = res.data;
						}else{
							let arr = res.data
							that.smallList = that.smallList.concat(arr)
						}
					}
			 	}
			 });
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			tostore(stroeId){
				uni.setStorageSync("detailStoreId", stroeId)
				this.$Router.push({
					path: '/pages/store/index',
					query: {
						id: stroeId
					}
				})
			},
			onGoStore(id){
				this.$Router.push({
					path: '/pages/goods/smaillHome',
					query: {
						ownerId: id
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
.groupon-card {
	
}

.groupon-title {

	background-position: center top;
	background-size: 100% auto;
}
.activity-wrap {
	background-color: #fff;
	
	.title-box {
		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.more-box {
			.more-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
			.more-icon {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-box,
	.goods-box {
		justify-content: space-between;
		width: 100%;
	}
}

// 小商品卡片
.min-goods {
	flex: 1;
	width: 220rpx;
	height: 220rpx;

	border-radius: 10rpx;
	.img-box {
		width: 220rpx;
		height: 220rpx;
		overflow: hidden;
		position: relative;
		border-radius: 10rpx 10rpx 0 0;
		border-radius: 15rpx;
		.pirce-card{
			position: absolute;
			width: 100%;
			height: 40rpx;
			background-color: #fd9306;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: space-between;
			font-size: 22rpx;
			align-items: center;
			color: #fff;
			padding-right: 10rpx;
			.pirce-info{
				width: 100rpx;
				height: 60rpx;
				// background: red;
				background-color: #fd9306;
				border-radius: 10rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				padding-left: 15rpx;
			}
		}
		image {
			width: 220rpx;
			height: 220rpx;
			background-color: #ccc;
		}
	}
	.mgoods-card-bottom {
		height: 160rpx;
		background: url($IMG_URL+'/imgs/tag/groupon_goods_bg.png') no-repeat;
		background-position: bottom center;
		background-size: 100% 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #000000;
		width: 180rpx;
		line-height: 26rpx;
	}

	.price {
		font-size: 30rpx;
		font-weight: 500;
		color: #ff0000;
		&::before {
			content: '￥';
			font-size: 24rpx;
		}
	}
	.original-price {
		font-size: 20rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
	.groupon-num-box {
		.avatar-box {
			direction: rtl;
			unicode-bidi: bidi-override;
			height: 30rpx;
			.avatar-img {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}
		.groupon-num-text {
			font-size: 18rpx;
			font-weight: 500;
			color: #e9b461;
		}
	}
}

// 大商品卡片
.big-goods {
	width: 710rpx;
 
	background: #ffffff;
	box-shadow: 0px 7rpx 8rpx 1rpx #fffaef;
	border-radius: 20rpx;
	.goods-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 6rpx;
	}
	.card-right {
		width: 430rpx;
		height: 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 600;
		width: 400rpx;
		color: #000000;
		vertical-align: middle;
		.title-tag {
			transform: scale(0.9);
		}
	}
	.subtitle-text {
		font-size: 22rpx;
		width: 400rpx;
		font-weight: 500;
		color: #666666;
	}
	.buy-btn {
		width: 120rpx;
		line-height: 50rpx;
	
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
	// 拼团
	.sell-box {
		background: rgba(#f9efd6, 0.3);
		border-radius: 16rpx;
		line-height: 32rpx;
		.sell-num {
			font-size: 20rpx;

			font-weight: 400;
			color: #ff6904;
		}

		.hot-icon {
			font-size: 26rpx;
			color: #ff6904;
			margin-right: 8rpx;
		}
	}
	.group-num {
		font-size: 20rpx;

		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 20rpx;
	}
	// 价格
	.price {
		color: #ff0000;
		font-weight: 600;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
	.origin-price {
		color: #c4c4c4;
		font-size: 24rpx;
		text-decoration: line-through;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
}
.noWork{
	text-align: center;
	color: #b9b9b9 !important;
	margin-top: 100rpx;
}
</style>
